<template>
	<div style="background-color: white;overflow: hidden;height: 100vh;">
		<h2 class="title">机构绑定</h2>
		<div v-if="role=='tourists'">
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">角色</div>
					<div class="personal-item-content">
						<el-select v-model="use.roleId" placeholder="选择角色" style="width: 100%;">
							<el-option v-for="item in options" :key="item.roleId" :label="item.roleInstructions" :value="item.roleId">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
		</div>
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">学校</div>
					<div class="personal-item-content">
						<el-select v-model="use.schoolId" placeholder="选择学校" style="width: 100%;margin-top: 1.25rem;">
							<el-option v-for="item in optionss" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>

		</div>
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">身份证</div>
					<div class="personal-item-content">
						
						<el-input v-model="use.userCard " placeholder="身份证"></el-input>
					</div>
				</div>
			</div>

		</div>
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">学号/工号</div>
					<div class="personal-item-content">
						<el-input v-model="use.userNum " placeholder="学号"></el-input>
						
					</div>
				</div>
			</div>

		</div>
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label"></div>
					<div class="personal-item-content">
						 <el-button type="primary"  style="background-color: #03d3bd;border: none;" @click="ChangeRole()">重新设置</el-button>
					     <el-button type="primary"  style="background-color: #ffaa00;border: none;" @click="BindingRole()" >修改绑定</el-button>
					</div>
				</div>
			</div>
		
		</div>
        </div>
		<div v-if="role!=='tourists'">
			<el-empty description="已绑定"></el-empty>
		</div>

	</div>
</template>

<script>
	import axios from "axios";
	import {
		HttpManager
	} from '../../../request/login.js'
	import {
		Regular
	} from '../../../utils/regular.js'
	export default {
		data() {
			return {
				yamswitch: true,
				djsswitch: false,
				djsnumber: 60,
				user: {
					phone: "",
					loginCode: "",
				},
				use: {
					roleId: '',
					schoolId: '',
					userCard: '',
					userNum: ''
				},
				centerDialogVisible: false,
				options: [],
				optionss: [],
				role:''
			};
		},
		methods: {
			//登录
			next() {
				this.$router.push("/carous");
			},
			back() {
				this.$router.push('/Login');
			},
			//绑定机构
			BindingRole() {
				HttpManager.BindingRole(this.qs.stringify(this.use))
					.then((res) => {
						console.log(res);
						this.$message({
							message: res.data.message,
							type: 'success'
						});
					})
			},
            //获取学校列表
            Init() {
            	HttpManager.GetSchoolList()
            		.then((res) => {
            			this.optionss = res.data.data;
						console.log(this.optionss);
            		})
            
            },
            //获取角色列表
            getSchoolLoginRoleList()
            {
            	HttpManager.getSchoolLoginRoleList().then(res=>{
            		this.options= res.data.data;
					console.log(this.options);
            	})
            },
			ChangeRole()
			{
				use.roleId="",
				use.schoolId="",
				use.userCard="",
				use.userNum=""
				
			}
			

			

		},
		created(){
			this.Init();
			this.getSchoolLoginRoleList();
			this.role=localStorage.getItem("role");
			
		}
	};
</script>

<style scoped="scoped">
	.title {
		margin: 20px 20px 10px;
	}
	.personal-item {
		/* padding: 24px 0; */
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 14px;
		line-height: 20px;
		/* border-bottom: 1px solid #e8e8e8; */
	}

	.personal-item-wrapper {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin-left: 25%;
	}

	.personal-item-label {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: 142px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		/* margin-left: 10.875rem; */
	}

	.personal-item-content {
		width: 25rem;
	}
</style>
